<template>
    <div class="order-report">
        <div class="report-table-top-title">增值服务支付单列表</div>
        <div class="report-table-form1">
            <div class="report-table-form1-line">
                <div
                    class="report-table-form1-item word samll"
                    style="width: 70px"
                >
                    代理商:
                </div>
                <div class="report-table-form1-item" style="width: 170px">
                    <el-select
                        v-model="searchParam.agentId"
                        filterable
                        clearable
                        class="items"
                        placeholder="请选择"
                        size="mini"
                    >
                        <el-option label="全部" value=""></el-option>
                        <el-option
                            v-for="item in options1"
                            :key="item.id"
                            :label="item.userName"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </div>
                <div
                    class="report-table-form1-item word samll"
                    style="width: 70px"
                >
                    商家编号:
                </div>
                <div class="report-table-form1-item" style="width: 170px">
                    <el-input
                        v-model="searchParam.companyCode"
                        placeholder
                        class="items"
                        size="mini"
                        suffix-icon="el-icon-search"
                    ></el-input>
                </div>
                <div
                    class="report-table-form1-item word samll"
                    style="width: 70px"
                >
                    下单时间:
                </div>
                <div class="report-table-form1-item" style="width: 170px">
                    <el-date-picker
                        v-model="searchParam.begintime"
                        type="datetime"
                        size="mini"
                        class="items"
                        @change="begintimeChange"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期时间"
                    >
                    </el-date-picker>
                </div>
                <div
                    class="report-table-form1-item word samll"
                    style="width: 30px"
                >
                    至:
                </div>
                <div class="report-table-form1-item" style="width: 170px">
                    <el-date-picker
                        v-model="searchParam.endtime"
                        type="datetime"
                        class="items"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        size="mini"
                        @change="endtimeChange"
                        placeholder="选择日期时间"
                    >
                    </el-date-picker>
                </div>
                <el-button type="primary" size="small" @click="reSearch"
                    >搜索</el-button
                >
                <el-button type="primary" size="small" @click="exportRport"
                    >导出Excel</el-button
                >
            </div>
        </div>
        <div class="page-padding-gray-small"></div>
        <div class="report-table-wrapper">
            <el-table
                :header-cell-style="headerCellStyle"
                size="small"
                :data="payOrderList"
                border
                style="width: 100%"
            >
                <el-table-column
                    prop="payNo"
                    label="支付单号"
                    min-width="160"
                ></el-table-column>
                <el-table-column
                    prop="payTradeNo"
                    label="第三方支付单号"
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    prop="companyName"
                    label="商家名称"
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    prop="bussType"
                    label="关联业务类型"
                    min-width="100"
                >
                    <template slot-scope="props">
                        <!-- 关联业务类型: 1 增值服务应用 -->
                        <div v-show="props.row.bussType === 1">
                            增值服务应用
                        </div>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="addServiceName"
                    label="关联业务名称"
                    min-width="170"
                ></el-table-column>
                <el-table-column
                    prop="bussNo"
                    label="关联业务单号"
                    min-width="170"
                ></el-table-column>
                <el-table-column prop="totalFee" label="金额" min-width="100">
                    <template slot-scope="props">
                        <div>{{ $fix2(props.row.totalFee / 100) }}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="payStatus"
                    label="支付状态"
                    min-width="100"
                >
                    <template slot-scope="props">
                        <!-- 状态 1- 未成功 2-成功 -->
                        <div v-show="props.row.payStatus === 1">未成功</div>
                        <div v-show="props.row.payStatus === 2">成功</div>
                    </template>
                </el-table-column>
                <!--   <el-table-column prop="qrCodeUrl" label="支付二维码" min-width="100">
                    <template slot-scope="props">
                        <div class="a" v-if="props.row.qrCodeUrl">
                            <qrcode :value="props.row.qrCodeUrl" :size="size"></qrcode>
                        </div>
                        <div class="a" v-else>无</div>
                    </template>
                </el-table-column> -->
                <!-- <el-table-column prop="refundOldPayNo" label="退款原支付单号" min-width="100"></el-table-column> -->
                <el-table-column
                    prop="createTime"
                    label="下单时间"
                    min-width="140"
                >
                    <template slot-scope="props">
                        <div>
                            {{
                                $dateFormat2(
                                    props.row.createTime,
                                    'Y-M-D h:m:s'
                                )
                            }}
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <div class="report-table-block" v-show="totalNum > pageSize">
            <div class="report-table-block-in">
                <el-pagination
                    background
                    :current-page.sync="currentPage"
                    @current-change="handleCurrentChange"
                    :page-size="pageSize"
                    layout="prev, pager, next, total"
                    :total="totalNum"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import { Qrcode } from 'vux'
import fileDownload from 'js-file-download'
/* 引入增值服务 */
import axios from 'axios'
export default {
    components: {
        Qrcode
    },
    data: function () {
        return {
            searchParam: {
                companyCode: '',
                begintime: '',
                agentId: '',
                endtime: ''
            },
            options1: [
                {
                    userName: '全部',
                    id: ''
                }
            ],
            value1: '',
            currentPage: 1,
            pageSize: 10,
            totalNum: 0,
            serverIp: '',
            payOrderList: [],
            size: 100
        }
    },
    mounted () {
    },
    created () {
        // let lastIndex = this.ip.lastIndexOf('/')
        // this.$store.state.serverIp = this.ip.slice(0, lastIndex)
        this.searchParam.begintime = this.dateToStr(new Date()) + ' 00:00:00'
        this.searchParam.endtime = this.dateToStr(new Date()) + ' 23:59:59'
        this.getAllAgent()
        this.getpayOrderList()
    },
    watch: {
    },
    props: {
        underLine: null
    },
    computed: {
        ip () {
            return this.$store.state.IP
        }
    },
    methods: {
        async getAllAgent () {
            let res = await this.$http.post(this.$store.state.IP + '/system/company/getAllAgent', {
            })
            let response = res.data
            if (response.ret === '0') {
                console.log(res)
                this.options1 = response.data
            }
        },
        begintimeChange (value) {
            // 开始时间 选择
            this.searchParam.begintime = value
            // this.checkDate()
        },
        endtimeChange (value) {
            // 选择结束时间
            this.searchParam.endtime = value
            // this.checkDate()
        },
        checkDate () {
            // 对比 日期，小的 放前面
            let date1 = new Date(this.searchParam.begintime).getTime()
            let date2 = new Date(this.searchParam.endtime).getTime()
            if (date1 > date2) {
                let temp = this.searchParam.begintime
                this.searchParam.begintime = this.searchParam.endtime
                this.searchParam.endtime = temp
            }
        },
        handleCurrentChange (page) {
            // 换页
            this.currentPage = page
            this.getpayOrderList()
        },
        reSearch () {
            // 点击搜索
            this.currentPage = 1
            this.getpayOrderList()
        },
        exportRport () {
            if (!this.searchParam.begintime) {
                return this.$message({
                    message: '开始时间不能为空',
                    type: 'warning'
                })
            }
            if (this.searchParam.endtime) {
                if (this.searchParam.endtime < this.searchParam.begintime) {
                    return this.$message({
                        message: '开始时间不能大于结束时间',
                        type: 'warning'
                    })
                }
            } else {
                return this.$message({
                    message: '结束时间不能为空',
                    type: 'warning'
                })
            }
            let that = this
            axios.get(this.$store.state.serverIp + '/pay/addspay/exportCompanypayorderlist' +
                '?companyCode=' + this.searchParam.companyCode +
                '&agentId=' + this.searchParam.agentId +
                '&endtime=' + new Date(Date.parse(this.searchParam.endtime.replace(/-/g, '/'))).getTime() +
                '&begintime=' + new Date(Date.parse(this.searchParam.begintime.replace(/-/g, '/'))).getTime(),
                {
                    responseType: 'blob',
                    headers: that.axiosDownloadHeaders()
                }
            ).then(function (response) {
                console.log(response)
                if (response.headers['content-type'] === 'application/json;charset=UTF-8') {
                    console.log('出错')
                    return
                }
                let fileName = decodeURIComponent(response.headers['content-disposition'])
                fileName = fileName.substring(20)
                if (response.headers['content-type'] === 'application/x-msdownload;charset=UTF-8') {
                    fileDownload(response.data, fileName)
                }
            }).catch(function (error) {
                alert(error)
            })
        },
        getpayOrderList () {
            if (!this.searchParam.begintime) {
                return this.$message({
                    message: '开始时间不能为空',
                    type: 'warning'
                })
            }
            if (this.searchParam.endtime) {
                if (this.searchParam.endtime < this.searchParam.begintime) {
                    return this.$message({
                        message: '开始时间不能大于结束时间',
                        type: 'warning'
                    })
                }
            } else {
                return this.$message({
                    message: '结束时间不能为空',
                    type: 'warning'
                })
            }
            // 获取 所有 服务列表
            this.$http.post(this.$store.state.serverIp + '/pay/addspay/companypayorderlist', {
                data: {
                    begintime: new Date(Date.parse(this.searchParam.begintime.replace(/-/g, '/'))).getTime(),
                    endtime: new Date(Date.parse(this.searchParam.endtime.replace(/-/g, '/'))).getTime(),
                    companyCode: this.searchParam.companyCode,
                    agentId: this.searchParam.agentId,
                    page: this.currentPage - 1,
                    limit: this.pageSize
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                response = response.body
                this.payOrderList = []
                if (response.ret === '0') {
                    this.payOrderList = response.data.list
                    this.totalNum = response.data.total
                }
                if (response.ret !== '0') {
                    console.log('调用获取所有代理商失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.items
    width: 175px

.order-report
    width: 100%
    background: #fff
    min-height: calc(100vh - 65px)
    position: relative

    .report-table-top-title
        width: 100%
        height: 64px
        line-height: 64px
        color: #000
        font-size: 18px
        background: #f1f0f5

    .report-table-form1
        width: 100%
        min-height: 40px
        padding: 16px 0 0 22px
        box-sizing: border-box
        background: #fff
        overflow: hidden

        .report-table-form1-line
            min-height: 32px
            margin-bottom: 16px

            .report-table-form1-item
                display: inline-block
                vertical-align: top
                height: 32px
                margin-right: 15px
                line-height: 32px

                &.word
                    margin-right: 0

                &.samll
                    font-size: 15px
                    text-align: left

                &.big
                    margin-right: 100px

    .report-table-block
        width: 100%
        padding-top: 22px
        height: 50px
        background: #fff
        box-sizing: border-box

        .report-table-block-in
            float: right
            padding-right: 17px

    .page-padding-gray-small
        width: 100%
        height: 22px
        background: #f1f0f5

    .page-padding
        width: 100%
        height: 20px
        background: #fff

    .report-table-total
        width: 100%
        font-size: 16px
        color: #409EFF
        padding: 22px
        margin-top: 22px
        box-sizing: border-box
        background: #fff

    .page-all-loading
        position: fixed
        top: 55%
        left: 40%
        width: 200px

.title
    display: inline-block
    min-width: 120px
    text-align: right
    font-weight: bold
    line-height: 35px

.value
    display: inline-block
    line-height: 35px
    min-width: 150px
</style>
